<template>
	<view class="page" v-if="checkPermission(['ROOT','MEETING:INSERT','MEETING:UPDATE'])">
		<view class="header">
			<input type="text" class="title" v-model="name" placeholder="请输入物料名称"
				placeholder-class="title-placeholder">
			<image src="https://www.retoc.xyz/icon/icon-18.png" mode="widthFix" class="edit-icon"></image>
		</view>
		<view class="attr">
			<view class="list">
				<view class="item">
					<view class="key">
						类型
					</view>
					<picker :range="items" :value="current" @change="typeChange">
						{{items[current]}}
					</picker>
				</view>
				<view class="item">
					<view class="key">
						详细描述
					</view>
					<input type="text" class="value" v-model="description" style="text-align: right;" placeholder="请输入"
						placeholder-class="title-placeholder" />
				</view>
				<view class="item">
					<view class="key">
						品牌
					</view>
					<input type="text" class="value" v-model="brand" style="text-align: right;" placeholder="请输入"
						placeholder-class="title-placeholder" />
				</view>
				<view class="item">
					<view class="key">
						数量
					</view>
					<uni-number-box :min="0" v-model="qty" background="#ffaaff" color="#fff" class="qty" />
					<input type="text" class="value" v-model="unit" style="text-align: right;width: 100rpx;"
						placeholder="请输入" placeholder-class="title-placeholder" />
				</view>
				<view class="item">
					<view class="key">
						单价
					</view>
					<input type="digit" class="value" v-model="price" style="text-align: right;" placeholder="请输入"
						placeholder-class="title-placeholder" />
				</view>
			</view>

		</view>
		<image :src="photoPath" mode="widthFix" class="image" v-if="photoPath!=null" @longpress="imgClick"></image>
		<image :src="photo==null?'https://www.retoc.xyz/icon/needJpg.png':photo" mode="widthFix" class="image" v-if="photoPath==null"
			@click="imgClick"></image>

		<button class="btn" @tap="dialogToggle">保存</button>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="请再确认是否提交"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				items: [],
				name:'',
				current: 0,
				qty: 1,
				unit: '个',
				opt: null,
				id: 0,
				description:'',
				price:0,
				brand:'',
				canEdit: true,
				instanceId: null,
				photoPath: null,
				photo:null
			};
		},
		onShow() {
			let that = this
			let pages = getCurrentPages()
			let currPage = pages[pages.length - 1]
			if (that.opt == 'insert') {
				let now = new Date()
				that.date = now.format("yyyy-MM-dd")

			} else if (that.opt == 'edit') {
				// console.log('meet.id', that.id);
				//获取数据
				that.ajax(that.url.getMaterialById, 'GET', {
					id: that.id
				}, function(resp) {
					let result = resp.data.result;
					console.log("edit", result);
					that.name = result.name;
					that.current = result.type-1;
					that.description = result.description;
					that.qty = result.qty;
					that.price = result.price;
					that.unit = result.unit;
					that.photo = result.photo;
				});
			}

		},
		onLoad(options) {
			this.id = options.id;
			this.opt = options.opt;
			let that = this;
			that.ajax(that.url.getType, 'GET', null, function(resp) {
				// console.log(resp);
				let result = resp.data.result
				for (let i in result) {

					that.items.push(result[i].typeDesc)
				}
				console.log(that.items);
			})
		},
		methods: {
			typeChange: function(e) {
				this.current = e.detail.value;
			},
			dialogConfirm() {
				console.log('点击确认')
				this.save();
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			
			imgClick() {
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						// console.log(JSON.stringify(res.tempFilePaths));
						that.photoPath = res.tempFilePaths[0]
					}
				});
			},
			save: function() {
				let that = this;
				// let array = [];
				// for (let one of that.members) {
				// 	array.push(one.id);
				// }
				//验证数据
				if (
					that.checkBlank(that.name, '名称') || that.checkBlank(that.description,'描述') || 
					that.checkBlank(that.price,'价钱') || that.checkBlank(that.unit,'单位') 
				) {
					return;
				}
				if(
					(that.photo==null||that.photo=='') && (that.photoPath==null||that.photoPath=='')
				){
					uni.showToast({
						title:'图片不能为空',
						icon:'error'
					})
					return;
				}
				uni.showLoading({
					title: '保存中...'
				})
				let data = {
					name: that.name,
					description: that.description,
					qty: that.qty,
					price: that.price,
					type: Number(that.current) + 1,
					brand: that.brand,
					unit: that.unit,
					id: that.id,
				};
				if((that.photoPath==null||that.photoPath=='')&&that.opt == 'edit'){
					that.ajax(that.url.updateMaterialsnop,'POST',data,function(resp){
						uni.hideLoading();
						uni.showToast({
							icon: 'success',
							title: '保存成功',
							complete: function() {
								setTimeout(function() {
									uni.navigateBack({});
								}, 2000);
							}
						});
					})
				}
				
				let url;
				if (that.opt == 'insert') {
					url = this.url.insertMaterials;
				} else if (that.opt == 'edit') {
					url = this.url.updateMaterials;
				}
				console.log('photo',that.photoPath);
				if(that.photoPath!=null&&that.photoPath!=''){
					uni.hideLoading();
					uni.uploadFile({
						url:url,
						filePath: that.photoPath,
						name:"photo",
						header:{
							token:uni.getStorageSync("token")
						},
						formData:{
							id:that.id,
							name: that.name,
							description: that.description,
							qty: that.qty,
							price: that.price,
							type: Number(that.current) + 1,
							brand: that.brand,
							unit: that.unit,
						},
						success:function(resp){
							uni.showToast({
								icon: 'success',
								title: '保存成功',
								complete: function() {
									setTimeout(function() {
										uni.navigateBack({});
									}, 2000);
								}
							});
						},
					})
				}
			},
		}
	}
</script>

<style lang="less">
	@import url(materials_info.less);
</style>
